<template>
  <div id="food-table">
    <delForm
      :form="delItem"
      :title="delDialogTitle"
      :visible="delFormVisile"
      @onclose="closedeldia(arguments)"
    >
    </delForm>
    <div class="table-head clear">
      <label>
        <el-input
          v-model="searchInput"
          autocomplete="off"
          @keydown.enter.native="searchTable()"
          placeholder="请输入桌号点击查询按钮搜索"
          clearable
          size="medium"
        ></el-input>
      </label>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="searchTable"
        plain
        >查询餐桌</el-button
      >
      <!--   <el-button type="primary" icon="el-icon-edit" size="mini" @click="appointment">预约就餐</el-button> -->
      <el-button
        type="primary"
        icon="el-icon-upload"
        size="mini"
        @click="addFoodTable"
        v-if="isSuper"
        >添加餐桌</el-button
      >
    </div>
    <div class="table-state">
      <span
        @click="selectTiptype(0)"
        :class="[selectType === 0 ? 'selectedspan' : 'unselected']"
        >总 <span>{{ tableStateAll }}</span></span
      >
      <span
        @click="selectTiptype(1)"
        :class="[selectType === 1 ? 'selectedspan' : 'unselected']"
        >使用中 <span>{{ tableStateUsed }}</span></span
      >
      <span
        @click="selectTiptype(2)"
        :class="[selectType === 2 ? 'selectedspan' : 'unselected']"
        >空闲 <span>{{ tableStateEmpty }}</span></span
      >

      <span
        @click="selectTiptype(3)"
        :class="[selectType === 3 ? 'selectedspan' : 'unselected']"
        >大厅 <span>{{ tableState1 }}</span></span
      >
      <span
        @click="selectTiptype(4)"
        :class="[selectType === 4 ? 'selectedspan' : 'unselected']"
        >包间 <span>{{ tableState2 }}</span></span
      >
    </div>
    <!-- <span>预订 <span>{{tableStateAppoint}}</span></span>-->
    <div class="changeShow clear">
      <div :class="[listShowType ? 'noselectShow' : 'selectShow']">
        <span class="iconfont icon-liebiao1" @click="changeShowType(0)"></span>
      </div>
      <div :class="[!listShowType ? 'noselectShow' : 'selectShow']">
        <span class="iconfont icon-liebiao" @click="changeShowType(1)"></span>
      </div>
      </div>
      <!--    <div class="table-state" >
            <span @click="selectAll" :class="[selectType==='all'?'selectedspan':'unselected']">总 <span>{{tableStateAll}}</span></span>
            <span @click="selectAllused" :class="[selectType==='used'?'selectedspan':'unselected']">使用中 <span>{{tableStateUsed}}</span></span>
            <span @click="selectAllempty" :class="[selectType==='empty'?'selectedspan':'unselected']">空闲 <span>{{tableStateEmpty}}</span></span>
    
            <div class="changeShow">
                <span class="iconfont icon-liebiao" @click="changeShowType()">11</span>
                <span class="iconfont icon-liebiao1"  @click="changeShowType()">22</span>

            </div>
        </div> -->
      <el-table
        v-if="listShowType"
        :data="showFoodTableData"
        style="width: 98%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="food_table_number"
          label="桌号"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column label="使用状态" width="80" align="center">
          <template slot-scope="scope" :max-width="120">
            <el-tag
              :type="scope.row.food_table_action ? 'primary' : 'success'"
              disable-transitions
              >{{ scope.row.food_table_action ? "使用中" : "空闲" }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
                    label="开桌时间"
            align="center" width="200px">
                <template  slot-scope="scope">
                    <span  v-if="scope.row.food_table_usingTime!='2020-10-10 00:00:00'">{{scope.row.food_table_usingTime}} </span>
                </template>
            </el-table-column>-->

        <el-table-column prop="food_table_seat" label="椅子数量" align="center">
        </el-table-column>
        <el-table-column
          prop="food_table_peoples"
          width="120"
          label="就餐人数"
          align="center"
        >
          <template slot-scope="scope">
            <input
              class="table-peoples"
              type="number"
              title="就餐人数：修改人数后点击输入框外的区域可保存修改"
              v-model="scope.row.food_table_peoples"
              @blur="editPeopels(scope.row)"
              onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
              onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
            />
          </template>
        </el-table-column>
        <el-table-column prop="food_table_type" label="餐桌类型" align="center">
        </el-table-column>
        <el-table-column label="点菜" align="left" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.food_table_action"
              size="mini"
              @click="yidian(scope.row)"
              >已点菜品</el-button
            >
            <el-button v-else size="mini" @click="openDianCai(scope.row)"
              >开始点菜</el-button
            >
            <el-button
              size="mini"
              v-if="!scope.row.food_table_account"
              @click="jiezhang(scope.row)"
              >结账</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="管理" v-if="isSuper" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="foodTableEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="foodTableDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--方格子-->
      <div v-else class="fangList">
        <ul class="clear">
          <li
            v-for="item in showFoodTableData"
            :class="[item.food_table_action ? 'used-item' : 'empty-item']"
            :key="item.id"
          >
            <span class="table-type"> {{ item.food_table_type }}</span>
            <div class="list-item">
              <p>
                <span
                  class="iconfont icon-icon_huabanfuben"
                  v-if="isSuper"
                  @click="foodTableDelete(item)"
                ></span
                ><span class="table-index">{{ item.food_table_number }}</span
                ><span
                  v-if="isSuper"
                  class="iconfont icon-ic_accepted"
                  @click="foodTableEdit(item)"
                ></span>
              </p>
            </div>
            <div class="list-item-info">
              <div class="table-info">
                <span title="最多建议就餐人数">
                  <span class="allseat">{{ item.food_table_seat }}</span>
                  <span class="iconfont icon-yizi"></span>
                </span>
                <span>
                  <span class="iconfont icon-renqun" title="就餐人数"> </span>

                  <span
                    ><input
                      class="table-peoples"
                      type="number"
                      title="就餐人数：修改人数后点击输入框外的区域可保存修改"
                      v-model="item.food_table_peoples"
                      @blur="editPeopels(item)"
                      onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                      onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                  /></span>
                </span>
              </div>
              <div class="table-btn">
                <button v-if="item.food_table_action" @click="yidian(item)">
                  已点<span class="iconfont icon-caidan"></span>
                </button>
                <button v-else @click="openDianCai(item)">
                  点菜<span class="iconfont icon-weibofang-xue"></span>
                </button>
                <button v-if="!item.food_table_account" @click="jiezhang(item)">
                  <span class="iconfont icon-jiezhang"></span>结账
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--分页-->
      <el-pagination
        v-if="listShowType"
        :page-size="10"
        @current-change="fenye"
        layout="prev, pager, next"
        :total="selectTableData.length"
      >
      </el-pagination>
      <!--分页-->
      <div class="type-2-fenye" v-else>
        <div @click="typePrev">上一页</div>
        <div class="pagelist">
          <span
            :class="[
              item === currentPage ? 'type-currentPage' : 'type-uncurrentPage',
            ]"
            v-for="item in pageMaxNum"
            :key="item"
            @click="pageOption(item)"
            >{{ item }}</span
          >
        </div>
        <div @click="typeNext">下一页</div>
      </div>
      <!--弹框-->
      <tableDialog
        :form="formData"
        :title="addDialogTitle"
        :visible="addFormVisible"
        @onclose="closedia(arguments)"
      >
      </tableDialog>
      <!--预订-->
      <yidian
        :number="selectTableNum"
        :visible="yidianVisible"
        :form="selectFoodData"
        @onclose="closeyidian(arguments)"
      >
      </yidian>

      <!--修改人数-->

      <el-dialog
        title="提示"
        :visible.sync="editPeopleVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span
          >确认将<span class="selectEditItem">{{
            selectEditItem.food_table_number
          }}</span
          >号桌的就餐人数修改为<span class="selectEditItem">{{
            selectEditItem.food_table_peoples
          }}</span
          >人</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="editPeopleVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditPeoples">确 定</el-button>
        </span>
      </el-dialog>
  
  </div>
</template>

<script>
//components记得引、！！！
import utils from "../utils/utils";
import delForm from "../components/tableDeleteDialog";
/*  import tableDialog1 from "../components/csss"*/
import tableDialog from "../components/foodTableAddForm";
import yidian from "../components/yidianDraw";
export default {
  name: "djltable",
  components: {
    tableDialog,
    delForm,
    yidian,
  },
  data() {
    return {
      //修改就餐人数。
      editPeopleVisible: false,
      selectEditItem: {},
      /* 第二种翻页 */
      pageMaxNum: "",
      /*已点*/
      yidianVisible: false,
      selectFoodData: [],
      selectTableNum: "",
      /**/
      selectTable: {},
      listShowType: false,
      addDialogTitle: "",
      dialogTitleMap: {
        addTitle: "添加餐桌",
        editTitle: "修改餐桌",
      },
      delDialogTitle: "",
      delDialogTitleMap: {
        delTableTitle: "删除餐桌",
      },
      widthSmall: "8%",
      delFormVisile: false,
      currentPage: 1,
      searchInput: "",
      isSuper: true,
      //数量
      tableState: {
        all: "",
        used: "",
        empty: "",
        appointment: "",
      },
      formData: {},
      addFormVisible: false,
      tableData: [],
      delItem: {},
      selectType: 0,
      selectTableData: [],
      screenWidth: document.bodyclientWidth, // 屏幕尺寸
    };
  },
  computed: {
    tableState1() {
      //大厅
      let arr = this.tableData.filter(
        (item) => item.food_table_type === "大厅"
      );
      return arr.length;
    },
    tableState2() {
      //大厅
      let arr = this.tableData.filter(
        (item) => item.food_table_type === "包间"
      );
      return arr.length;
    },
    showFoodTableData() {
      /*   if(listShowType){
            //如果是
        } */
      let start = (this.currentPage - 1) * 10;
      let stop = start + 10;
      let datas = this.selectTableData.slice(start, stop);
      this.pageMaxNum = Math.ceil(this.selectTableData.length / 10);

      return datas;
    },
    tableStateAll() {
      return this.tableData.length;
    },
    tableStateUsed() {
      let arr = this.tableData.filter((item) => item.food_table_action === 1);
      return arr.length;
    },
    tableStateEmpty() {
      let arr = this.tableData.filter((item) => item.food_table_action === 0);
      return arr.length;
    },
    tableStateAppoint() {
      let arr = this.tableData.filter(
        (item) => item.food_table_usingTime !== ""
      );
      return arr.length;
    },
  },
  methods: {
    //隔行

    tableRowClassName({ row, rowIndex }) {
      if (row.food_table_action) {
        return "used-row";
      } else {
        return "empty-row";
      }
    },
    fenye(val) {
      this.currentPage = val;
    },
    //搜索
    searchTable() {
      //请求查询
      console.log('点击搜索')
      this.searchInput = this.searchInput.trim();
      if (this.searchInput != "") {
        this.getTableData("/selectFoodTableByNumber", {
          food_table_number: this.searchInput,
        });
      } else {
        this.getTableData("/selectAllFoodTable", {});
      }
    },
    yidian(item) {
      //已点

      this.selectTableNum = item.food_table_number;
      this.yidianVisible = true;
      this.selectTable = { ...item };

      this.getOrderingFood(item.food_table_number);
    },
    //关闭预订界面
    closeyidian(e) {
      this.yidianVisible = false;
    },
    getOrderingFood(number) {
      this.axios({
        method: "get",
        url: "/selectOrderingFoodById",
        params: { food_table_number: number },
      }).then((data) => {
        if (data.data.code === 200) {
          this.selectFoodData = data.data.data;
        }
      });
    },

    //查询
    getTableData(url, obj) {
      this.axios({
        method: "get",
        url: url,
        params: obj,
      }).then((data) => {
        if (data.data.code === 200) {
          this.tableData = data.data.data.reverse();
          if (this.selectType === 0) {
            this.selectTableData = this.tableData;
          }
        }
      });
    },
    //修改
    foodTableEdit(item) {
      this.addFormVisible = true;
      this.formData = { ...item };
      this.addDialogTitle = this.dialogTitleMap.editTitle;
    },
    //删除
    foodTableDelete(item) {
      this.delDialogTitle = this.delDialogTitleMap.delTableTitle;
      //删除餐桌
      this.delFormVisile = true;
      this.delItem = { ...item };
    },
    closedeldia(e) {
      if (e[0]) {
        this.searchTable();
      } else {
        this.$message({
          type: "info",
          message: "取消操作",
        });
      }
      this.delFormVisile = false;
    },

    //添加
    addFoodTable() {
      this.addDialogTitle = this.dialogTitleMap.addTitle;
      this.addFormVisible = true;
      this.formData = {
        food_table_number: "",
        food_table_action: 0,
        food_table_seat: "",
        food_table_usingTime: "2020-10-10 00:00:00",
        food_table_type: "",
        food_table_peoples: 0,
        food_table_account: 1,
      };
    },

    //隐藏弹框。
    closedia(e) {
      if (e[0]) {
        this.getTableData("/selectAllFoodTable", {});
      }

      this.addFormVisible = false;
    },
    //结账 传参
    jiezhang(item) {
      let id = item.food_table_number;
      this.$router.push({ path: `/home/shouyin/${id}` });
    },
    //openDianCai开始点菜
    openDianCai(item) {
      let id = item.id;
      this.$router.push({ path: `/home/Diancai/${id}` });
    },
    //标签筛选

    selectTiptype(type) {
      this.selectType = type;
      this.searchTable();
      switch (type) {
        case 0: //所有；
          this.selectType = type;
          break;
        case 1: //使用中
          this.selectTableData = this.tableData.filter(
            (item) => item.food_table_action === 1
          );
          break;
        case 2: //空闲
          this.selectTableData = this.tableData.filter(
            (item) => item.food_table_action === 0
          );
          break;
        case 3: //大厅
          this.selectTableData = this.tableData.filter(
            (item) => item.food_table_type === "大厅"
          );
          break;
        case 4: //包间
          this.selectTableData = this.tableData.filter(
            (item) => item.food_table_type === "包间"
          );
      }
    },

    //切换列表显示样式
    changeShowType(index) {
      this.listShowType = index;
    },

    typePrev() {
      if (this.currentPage > 1) this.currentPage--;
    },
    typeNext() {
      if (this.currentPage < this.pageMaxNum) this.currentPage++;
    },
    pageOption(val) {
      this.currentPage = val;
    },
    isSuperUser(is) {
      this.isSuper = is;
    },
    //修改桌子人数。
    editPeopels(item) {
      //弹框确认
      this.editPeopleVisible = true;
      this.selectEditItem = { ...item };
    },
    //取消
    handleClose() {
      this.editPeopleVisible = false;
    },
    submitEditPeoples() {
      this.axios({
        method: "post",
        url: "/updateFoodTableForPeoples",
        data: {
          food_table_number: this.selectEditItem.food_table_number,
          food_table_peoples: this.selectEditItem.food_table_peoples,
        },
      }).then((data) => {
        if (data.data.code === 200) {
          this.$message({
            type: "success",
            message: data.data.msg,
          });
          this.editPeopleVisible = false;
        } else if (data.data.code === 500) {
          this.$message({
            type: "error",
            message: data.data.msg,
          });
        }
      });
    },
  },

  created() {
    this.getTableData("/selectAllFoodTable", {});
    this.isSuperUser(utils.getStorage("user").username == "admin");
  },

};
</script>

<style>
@import "../assets/css/table.css";
@import "../assets/food_table_font/iconfont.css";
</style>
<style lang="less" scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}

.table-peoples {
  font-size: 1.6rem;
  border: none;
  width: 3rem;
  border-radius: 0.4rem;
  color: rgb(68, 68, 68);
  text-align: center;
  height: 2.6rem;
  border: 2px solid rgba(255, 99, 71, 0);
  transition: all 0.2s;
  outline: none;
  &:hover {
    border: 2px solid tomato;
  }
}
.el-table {
  .table-peoples {
    font-size: 1.4rem;
  }
}
.fangList {
  ul {
    margin-top: 2rem;
  }

  li {
    background-color: white;
    &:hover {
      background-color: rgb(255, 249, 248);
      .list-item {
        box-shadow: 1rem 0.1rem 1rem rgba(251, 234, 232, 1);
      }
    }
    position: relative;
    list-style: none;
    width: 20rem;
    height: 20rem;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    margin: 1.2rem;
    border-radius: 12rem;
    .table-type {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 42%;
      font-size: 1.2rem;
      letter-spacing: 1rem;
      color: rgb(221, 197, 195);
      font-weight: 200;
    }
    .list-item {
      height: 6rem;
      border-radius: 12rem;
      transition: all 0.3s;
      box-sizing: border-box;
      background-color: white;
      margin-top: 1.4rem;
    }
    .table-index {
      letter-spacing: 0.2rem;
    }
    box-shadow: 1rem -1rem 2rem rgb(255, 223, 223);
    &.used-item {
      .table-index {
        color: #a0d0ff;
      }
    }
    &.empty-item {
      .table-index {
        color: #50bd81;
      }
    }
    p {
      box-sizing: border-box;
      width: 100%;
      padding: 2rem 1rem;
      font-size: 2rem;
      color: rgb(196, 122, 114);
      font-style: italic;
      font-weight: bold;
      span {
        display: block;
        width: 2rem;
        text-align: center;
        &.table-index {
          width: 12rem;
        }
      }
      display: flex;
      justify-content: center;

      span.iconfont {
        transition: all 0.2s;
        cursor: pointer;
        font-size: 1.6rem;
        text-align: left;
        font-weight: 400;
        color: #e0dfdf;
        &.icon-ic_accepted {
          text-align: right;
        }
        &:hover {
          color: tomato;
        }
      }
    }
    /* 信息展示 */
    .list-item-info {
      height: 10rem;
      .table-info {
        display: flex;
        justify-content: center;
        margin: 1rem 0 1rem;
        height: 2.6rem;
        > span {
          width: 5rem;
          line-height: 2.6rem;
          text-align: center;
          font-size: 1.6rem;
          display: flex;
          justify-content: center;
          .allseat {
            color: rgb(179, 179, 179);
          }

          > span.iconfont {
            margin: 1rem;
            color: rgb(206, 206, 206);
            margin: 0 0.8rem;
            font-size: 1.6rem;
          }
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          appearance: none;
          margin: 0;
        }
      }
      .table-btn {
        display: flex;
        justify-content: center;

        button {
          outline: none;
          transition: all 0.2s;
          border: none;
          display: inline-block;
          background-color: #ceb3b300;
          font-size: 1.2rem;
          cursor: pointer;
          padding: 1rem;
          margin: 0 1rem;
          color: gray;
          span {
            transition: all 0.2s;
            font-size: 1.4rem;
            margin-left: 0.8rem;
            color: rgb(206, 206, 206);
          }
          &:nth-of-type(2) {
            span {
              margin-right: 0.8rem;
            }
          }
          &:hover {
            color: tomato;
            span {
              color: tomato;
            }
          }
        }
      }
    }
  }
}
.type-2-fenye {
  margin: 2rem;
  > div {
    float: left;
    cursor: pointer;
    margin: 0 1rem;
    &.pagelist {
      span {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        cursor: pointer;
        margin: 0 0.2rem;
        transition: all 0.2s;
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        &.type-currentPage {
          background-color: rgb(170, 224, 255);
          color: white;
          font-weight: bold;
          border-radius: 3rem;
        }
        &:hover {
          border-bottom: 1px solid rgb(97, 194, 250);
        }
      }
    }
    &:not(.pagelist) {
      transition: all 0.2s;
      width: 3rem;
      height: 3rem;
      text-align: center;
      line-height: 3rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0);
      &:hover {
        border-bottom: 1px solid rgb(97, 194, 250);
      }
    }
  }
}

/*   <div class="type-2-fenye" v-else>
        <div @click="typePrev">上一页</div>
        <div class="pagelist">
            <span :class="[num===currentPage?'type-currentPage':'type-uncurrentPage']" v-for="num in pageMaxNum" :key="num">{{num}}</span>
        </div>
        <div @click="typeNext">下一页</div>
    </div> */
#food-table {
  /*   .bgimage{
     background-image:url('~@/assets/chefs-1662717_960_720.jpg');
     background-size: cover;
     position:absolute;
     z-index: -1;
     width: 100%;
     height: 100%;
     filter: blur(10px);
  } */

  padding: 20px;
  text-align: left;

  .el-input {
    width: 20rem;
    height: 4rem;
    margin-right: 1rem;
    border: none;
  }

  .el-button:nth-of-type(1) {
    margin-left: 0;
  }
}

.changeShow {
  margin-right: 5rem;
  float: right;
  text-align: right;
  div {
    float: left;
    &.selectShow {
      span {
        color: rgba(255, 157, 43, 0.87);
      }
    }
  }
  span {
    font-size: 1.6rem;
    margin-right: 1rem;
    color: rgb(218, 218, 218);
    cursor: pointer;
  }
}
/*当前筛选*/
.selectedspan {
  border-bottom: 2px solid rgba(255, 157, 43, 0.87);
}
.unselected {
  border-bottom: 2px solid rgba(255, 157, 43, 0);
}
</style>